import {Collapse, Button} from 'antd'
import type {ColumnsType} from 'antd/es/table'
import React, {useState, useEffect} from 'react'
import {connect, history} from 'umi'
import cardStyles from '../../index.less'
import {getRenewalRecord} from '@/service/order/index'
import CustomTable from '@/components/Table'
import styles from './index.less'

const {Panel} = Collapse

function RenewInfo(props: any) {
	const {info, global, dispatch} = props
	const {currentRoute} = global
	const customizeHeader = (value: string) => (
		<div>
			<div className={styles.tip} />
			{value}
		</div>
	)
	const renewInfoColumns: ColumnsType<any> = [
		{
			title: '原订单编号',
			dataIndex: 'quondamOrderCarNo',
			align: 'center',
			render: (text: any, record: any) => (
				<>
					{info?.orderCarNo === record?.quondamOrderCarNo ? (
						<>{record?.quondamOrderCarNo}</>
					) : (
						<Button
							type="link"
							onClick={() => {
								dispatch({
									type: 'global/deleteTabs',
									payload: currentRoute,
								})
								if (window.location.href?.includes('details')) {
									history.push(
										`/order/detail?id=${record?.quondamOrderCarId}`,
									)
								} else {
									history.push(
										`/order/details?id=${record?.quondamOrderCarId}`,
									)
								}
							}}>
							{record?.quondamOrderCarNo}
						</Button>
					)}
				</>
			),
		},
		{
			title: '续签订单编号',
			dataIndex: 'pristineOrderCarNo',
			align: 'center',
			render: (text: any, record: any) => (
				<>
					{info?.orderCarNo === record?.pristineOrderCarNo ? (
						<>{record?.pristineOrderCarNo}</>
					) : (
						<Button
							type="link"
							onClick={() => {
								dispatch({
									type: 'global/deleteTabs',
									payload: currentRoute,
								})
								if (window.location.href?.includes('details')) {
									history.push(
										`/order/detail?id=${record?.pristineOrderCarId}`,
									)
								} else {
									history.push(
										`/order/details?id=${record?.pristineOrderCarId}`,
									)
								}
							}}>
							{record?.pristineOrderCarNo}
						</Button>
					)}
				</>
			),
		},
		{title: '司机名称', dataIndex: 'driverName', align: 'center'},
		{title: '车牌号', dataIndex: 'plateNo', align: 'center'},
	]
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})
	const [total, setTotal] = useState(0) // 费用减免
	const [list, setList] = useState<any[]>([])
	useEffect(() => {
		const queryDataXQ = {
			pristineOrderCarId: info?.id,
		}
		const queryData = {
			quondamOrderCarId: info?.id,
		}
		getRenewalRecord(info?.isRelet === 1 ? queryDataXQ : queryData).then(
			(res: any) => {
				if (res?.success) {
					setList(res?.data?.records)
					setTotal(res?.data?.total)
				}
			},
		)
	}, [])
	return (
		<div className={cardStyles.card} id="renewInfo">
			<Collapse
				defaultActiveKey={['1', '2']}
				ghost
				expandIconPosition="end">
				<Panel header={customizeHeader('续签信息')} key="1">
					<CustomTable
						params={params}
						columns={renewInfoColumns}
						pagination={false}
						total={total}
						callback={(pagination: any) => {
							setParams(pagination)
						}}
						loading={false}
						dataSource={list}
					/>
				</Panel>
			</Collapse>
		</div>
	)
}

export default connect(({global}: any) => ({global}))(RenewInfo)
